'use strict';

import React, {Component, PropTypes} from 'react';
import ReactDOM, {render} from 'react-dom';

import {R_header} from './common/index'

import codes from '../../src/img/code.png'
import {HttpService, Toast} from '../Http';
import imgTip from '../img/tip.png'

export default class VerifyText extends React.Component {

    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    constructor(props) {
        super(props);
        this.state = {
            disabled: false,
            text: '获取验证码',
            timer: 120,
            val: '',
            bg: 'app-blue-radius-button',
            bg2: 'app-little-pink-radius-button'
        };
        this.countdown = []
    }
    componentWillUnmount() {
        clearInterval(this.countdown);
    }
    getCode() {

        if (this.state.disabled) {
            return;
        }

        HttpService.query({
            url: '/app/device/generateSMSCode',
            data: {
                token: localStorage.appToken || '',
                telephone: localStorage.userphone,
                admintelephone: localStorage.userphone,//this.props.params.telephone,
                module: 'changedevice',
                mdtid: this.props.params.mdtid,
                weixinclient: 'true'
            },
            success: (res) => {
                if (res.code == 10004) {
                    this.setState({disabled: true, text: '119S 后重新获取', timer: 119, bg: 'app-blue-radius-check-button'});
                    this.countdown = setInterval(() => {
                        var tt = this.state.timer - 1;
                        if (tt <= 0) {
                            this.setState({disabled: false, text: '获取验证码', timer: 120, bg: 'app-blue-radius-button'});
                            clearInterval(this.countdown);
                            return;
                        }
                        this.setState({
                            disabled: true,
                            text: tt + 'S 后重新获取',
                            timer: tt,
                            bg: 'app-blue-radius-check-button'
                        })
                    }, 1000);

                } else {
                    Toast.toast(res.msg);
                }
            }
        })

    }

    changeValue(e) {
        var val = e.target.value;
        this.setState({val: val, bg2: 'app-pink-radius-button'})
    }

    go() {

        if (!this.state.val) {
            Toast.toast('请先获取验证码');
            return;
        }
        HttpService.save({
            url: '/app/device/change',//'/app/device/change',
            data: {
                token: localStorage.appToken,
                telephone: localStorage.userphone,// this.props.params.telephone,
                babyid: localStorage.babyid,
                mdtid: this.props.params.mdtid,
                mdtcode: this.props.params.mdtid,
                smscode: this.state.val
            },
            success: (res => {
                if (res.code == '10074') {
                    clearInterval(this.countdown);
                    localStorage.delDevice = 1;
                    localStorage.ischange = 1;
                    //this.context.router.push(`/map/${localStorage.appToken}/${localStorage.userid}`);
                    this.context.router.push(`/More/${localStorage.babyid}`);
                } else {
                    Toast.toast(res.msg);
                }
            })
        })
    }

    render() {

        const phone = this.props.params.telephone.substr(0, 3) + '****' + this.props.params.telephone.substr(7, 11);
        const {bg2} = this.state;

        return (

            <div style={{
                background: '#eee',
                minHeight: '100%',
                paddingTop: '88px'
            }}>
                <R_header left="1" title='更换设备'/>

                <div className="container" style={{
                    background: '#eee',
                    minHeight: '100%',
                    paddingTop: '1rem'
                }}>

                    <div className="col-xs-12 app-white-input" style={{
                        lineHeight: '3rem'
                    }}>
                        <div className="col-xs-2 text-right" style={{
                            paddingLeft: 0
                        }}>

                            <img src={codes} style={{
                                width: '2.2rem'
                            }}/>

                        </div>
                        <div className="col-xs-6" style={{
                            paddingLeft: 0
                        }}><input id="number" type="text" placeholder="请输入验证码" onChange={this.changeValue.bind(this)} required style={{
                width: '100%',
                verticalAlign: 'middle'
            }}/></div>
                        <div className="col-xs-4 text-right" style={{
                            padding: '0'
                        }}>
                            <div className={this.state.bg} style={{
                                textAlign: 'center'
                            }} onClick={this.getCode.bind(this)}>
                                {this.state.text}
                            </div>
                        </div>
                    </div>
                    <div className="col-xs-12 app-white-input" style={{
                        lineHeight: '3rem',
                        marginTop: '1rem'
                    }}>设备号码：{phone}</div>
                    <label style={{
                        display: 'block'
                    }}>

                        <div className={"col-xs-12 text-center " + bg2} onClick={this.go.bind(this)} style={{
                            marginTop: '1.5rem',
                            fontSize: '1.6rem'
                        }}>确认更换
                        </div>
                        <button type="submit" style={{
                            display: 'none'
                        }}></button>
                    </label>
                    <div className="col-xs-12" style={{
                        marginTop: '2rem',
                        lineHeight: '1.5em'
                    }}>
                        <h5 className='tipname'><img src={imgTip}/>更换新设备须知</h5>
                        <p className='tipcontent'>
                            <ol class="listorder">
                                <li>1. 更换为智能学生证的用户，请输入前14位IMEI号，最后一位数字不用输入，或者直接扫描智能学生证的条形码。</li>
                                <li>2. 考勤卡更换为智能学生证的用户，请配合旧的考勤卡使用，请勿丢失。</li>
                                <li>3. 更换为普通考勤卡的用户，请输入考勤卡设备背面的10位考勤卡号。</li>
                            </ol>
                        </p>
                    </div>
                </div>

            </div>
        )
    }

}
